<template>
  <div style="margin-top: 50px" class="content-pet">
    <project-card
        v-for="(project,index) in projectList"
        :key="index"
        :project="project"
        class="item-pet"
    >
    </project-card>
  </div>


</template>

<script>
import ProjectCard from "@/components/SimpleUser/Project/ProjectCard.vue";
import axios from "axios";

export default {
  name: "ProjectPage",
  mounted() {
    this.getProjectList();

  },
  components: {ProjectCard},
  data(){
    return{
      projectList:[],
    }
  },
  methods:{
    getProjectList(){
      axios.get('http://localhost:8088/project/list',{withCredentials:true})
          .then(res => {
            this.projectList = res.data.data;
          })
    }

  }


}
</script>
<style>
.content-pet {
  width: 100%;
  margin-top: 0px;
}

.item-pet {
  flex: 1;
  height: 200px;

  /* 间隙为5px */
  margin: 0 50px 50px 0;
  /* END */

  /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
  width: calc((100% - 20px) / 3);
  /* END */

  /* 加入这两个后每个item的宽度就生效了 */
  min-width: calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
  /* END */
}

.item-pet:nth-child(3n) {
  /* 去除第3n个的margin-right */
  margin-right: 0;
}
</style>